<template>
    <!--
    效果成果的前提是，wrapper<content才能有滚动效果，
    wrapper的高度应该是视窗的高度
    在使用组件的地方对<scroll>标签加入class,在class中设置视窗的高度
    -->
    <div ref="wrapper">
        <div>
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll';
import ObserveDOM from '@better-scroll/observe-dom';

BScroll.use(ObserveDOM);

export default {
    name: 'Scroll',
    data: function () {
        return {
            scroll: null
        }
    },
    props: {
        probeType: {
            type: Number,
            defualt: 0
        },
        pullUpLoad: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
        //1.创建BS对象
        this.scroll = new BScroll(this.$refs.wrapper, {
            //对BS对象的配置
            click: true,//是否允许click事件
            tap: true,//click派发一个 tap 事件
            probeType: this.probeType,//决定是否派发 scroll 事件，对页面的性能有影响
            pullUpLoad: this.pullUpLoad,//scrollup监听
            observeDOM: true,//监察dom
        });
        //2.监听滚动的位置
        if (this.probeType === 2 || this.probeType === 3) {
            this.scroll.on('scroll', (position) => {
                this.$emit('scroll', position)
            });
        }
        //3.监听上拉事件
        if (this.pullUpLoad) {
            this.scroll.on('pullingUp', () => {
                this.$emit('pullingUp')
            });
        }
    },
    methods: {
        scrollTo (x, y, time = 300) {
            this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time);
        },
        finishPullUp () {
            this.scroll && this.scroll.finishPullUp && this.scroll.finishPullUp();
        },
    }
}
</script>
<style scoped>
</style>